<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>效果图详情</title>
    <!--css style-->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="responsive/flexible.css">
    <script src="responsive/flexible.js"></script>
</head>
<body class="effect inner_page effect_detail">
    <header>
        <a href="javascript:void(0)" class="pre_page"></a>
      效果图

    </header>

    <section class="main">
      <div class="show_area">
          <!--banner start-->
          <div class="wrapper">

              <ul class="hiSlider">
                  <li class="hiSlider-item">
                      <a href="javascript:void(0)"><img src="img/effect_show.jpg" alt="1/3"></a>
                  </li>
                  <li class="hiSlider-item">
                      <a href="javascript:void(0)"><img src="img/effect_show.jpg" alt="2/3"></a>
                  </li>
                  <li class="hiSlider-item">
                      <a href="javascript:void(0)"><img src="img/effect_show.jpg" alt="3/3"></a>
                  </li>
              </ul>

          </div>
          <!--banner end-->
          <div class="container">
              <h1>现代简约三居室客厅装修效果图</h1>
              <p>餐厅和走道空间,用黑色质感的装饰带做电视背景墙,非常具有简约时尚
                  范儿,而且注重实用性。</p>
          </div>


      </div>
        <form action="" class="quote_form container">
            <h2>免费设计10秒出报价</h2>
            <div class="error_message"></div>

            <ul>
                <li>
                    <select name="province" id="s_province">
                        <option disabled value="选择你所在的城市" selected="selected">选择你所在的城市</option>
                    </select>
                </li>
                <li>
                    <input type="text" placeholder="请输入您的房屋面积" name="room" id="room" onblur="checkRoom(this)">
                    <i>m<sup>2</sup></i>

                </li>
                <li class="space1">
                    <div class="input_wrapper">
                        <input type="number" placeholder="1-5" name="rooms" id="rooms" class="rooms" min="1" max="5" onblur="checkEmpty(this,'此处不能留空')">
                        <i>室</i>
                    </div>
                    <div class="input_wrapper">
                        <input type="number" placeholder="1-5" name="halls" id="halls" class="halls" min="1" max="5" onblur="checkEmpty(this,'此处不能留空')">
                        <i>厅</i>
                    </div>


                </li>
                <li class="space2">
                    <div class="input_wrapper">
                        <input type="number" placeholder="1-5" name="kitchens" id="kitchen" class="kitchen" min="1" max="5" onblur="checkEmpty(this,'此处不能留空')">
                        <i>厨</i>
                    </div>
                    <div class="input_wrapper">
                        <input type="number" placeholder="1-3" name="restroom" id="restroom" class="restroom" min="1" max="3" onblur="checkEmpty(this,'此处不能留空')">
                        <i>卫</i>

                    </div>
                    <div class="input_wrapper">
                        <input type="number" placeholder="1-5" name="balcony" id="balcony" class="balcony" min="1" max="5" onblur="checkEmpty(this,'此处不能留空')">
                        <i>阳台</i>
                    </div>



                </li>
                <li>

                    <input type="text" placeholder="输入手机号码，报价结果将发送到您的手机" name="telephone" id="telephone" onblur="checkTel(this)">
                </li>

                <div class="clear"></div>
            </ul>

            <input type="submit" value="立即计算" onclick="checkEvaluateInfo()">
        </form>



    </section>
    <div class="to_appoint">
        <div class="wrapper">
            <h3><img src="img/person.png" alt="">刘博</h3>
            <p><img src="img/shop.png" alt="">紫叶国际设计</p>
            <a href="javascript:void(0)" class="appoint_btn">预约设计师</a>
        </div>

    </div>

</body>
<script src="js/jquery.js"></script>
<script src="js/jquery.hiSlider.min.js"></script>
<script src="js/area.js"></script>
<script type="text/javascript">_init_area(["s_province"]);</script>
<script>
    $(function(){
        $(".screen li").click(function(){
            var $this=$(this);
            $this.find(".sub_menu").slideToggle();
            $this.siblings("li").find(".sub_menu").hide();
        });
    });
</script>
<script>
    /*检测房屋面积*/
    function checkRoom(obj) {
        obj.errorFlag = false;
        if (checkEmpty(obj, '请您填写房屋面积')) {
            obj.errorFlag = true;
            return obj.errorFlag;
        }
        if (!(/[0-9]/.test(obj.value))) {
            showErrorMessage("输入房屋面积格式不正确");
            obj.errorFlag = true;
        }else{
            clearErrorMessage();
        }
    }
    /*校验手机号码*/
    function checkTel(obj){
        obj.errorFlag = false;
        if (checkEmpty(obj,'请您填写手机号码')) {
            obj.errorFlag = true;
            return  obj.errorFlag;
        }
        if(!(/^1[3|4|5|7|8]\d{9}$/.test(obj.value))){
            showErrorMessage("输入手机号码不正确");
            obj.errorFlag = true;
        }else {
            clearErrorMessage();
        }
        return  obj.errorFlag;
    }
    /*检测是否为空*/
    function checkEmpty(obj,message){
        if(obj.value==''){
            showErrorMessage(message);
            return true;
        }else{
            clearErrorMessage(message);
            return false;
        }
    }
    /*检测计算数据*/
    function checkEvaluateInfo(){
        var elTel=document.getElementById("telephone");
        var elRoom=document.getElementById("room");
        var elRooms=document.getElementById("rooms");
        var elHalls=document.getElementById("halls");
        var elKitchen=document.getElementById("kitchen");
        var elRestroom=document.getElementById("restroom");
        var elBalcony=document.getElementById("balcony");

        /*检测地区*/
        for(var i=0;i< $("#s_province option:checked").length;i++){
            if($("#s_province option:checked").eq(0).index()==0){
                showErrorMessage("请选择所在地区");
                $(".quote_form").submit(false);
                return;

            }
        }
        if(checkRoom(elRoom)){
            $(".quote_form").submit(false);
            return;
        }
        if(checkEmpty(elRooms,"室不能为空")){
            $(".quote_form").submit(false);
            return;
        }
        if(checkEmpty(elHalls,"厅不能为空")){
            $(".quote_form").submit(false);
            return;
        }

        if(checkEmpty(elKitchen,"厨不能为空")){
            $(".quote_form").submit(false);
            return;
        }
        if(checkEmpty(elRestroom,"卫不能为空")){
            $(".quote_form").submit(false);
            return;
        }
        if(checkEmpty(elBalcony,"阳台不能为空")){
            $(".quote_form").submit(false);
            return;
        }

        if(checkTel(elTel)){
            $(".quote_form").submit(false);
            return;
        }

    }

    function showErrorMessage(message){
        $(".error_message").html("*"+message);
    }

    function clearErrorMessage() {
        $(".error_message").html("");
    }


</script>
<script>
    $(function () {
        /*banner animation*/
        $('.hiSlider').hiSlider({
            mode: 'fade',
            isSupportTouch: true,
            isShowPage:false,
            titleAttr: function(curIdx){
                return $('img', this).attr('alt');
            }
        });
    });

</script>
</html>